
//@ts-nocheck
import React, { useEffect, useImperativeHandle } from 'react'

import * as echarts from 'echarts/lib/echarts'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import 'echarts/lib/chart/bar'

import { ChartData } from '../interface'
import './index.less'
import { ChartsInstance } from '../Bar/interface'

let echartsInstance: any

interface IProps {
  chartId?: string
  data: ChartData
  chartRef?: React.MutableRefObject<ChartsInstance>
}

const PieChart: React.FC<IProps> = ({ chartId, chartRef, data }) => {
  useEffect(() => {
    echartsInstance = echarts.init(document.getElementById(chartId || 'charts-line-chart'))
    // setOptions()
  }, [])

  useEffect(() => {
    if (echartsInstance) setOptions()
  }, [data])

  useImperativeHandle(chartRef, () => ({
    getInstance: () => {
      return echartsInstance
    }
  }))

  const setOptions = () => {
    echartsInstance.setOption({
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '5%',
        top: '5%',
        bottom: '10%',
        right: '5%'
      },
      legend: {
        orient: 'vertical',
        left: 'right'
      },
      xAxis: {
        type: 'category',
        // boundaryGap: false,
        data: data.xAxis
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: false
        }
      },
      series: data.series
    })
  }

  return <div className="charts-line-chart" id={chartId || 'charts-line-chart'} />
}
export default (PieChart)
